<template>
  <div class="user">
    <user-search
      @reset-click="handleResetClick"
      @query-click="handleQueryClick"
    ></user-search>
    <user-content
      @new-click="handleNewUserClick"
      @edit-click="handleEditeClick"
      ref="contentRef"
    ></user-content>
    <!-- 用户的对话框 -->
    <UserModal ref="userModalRef"></UserModal>
  </div>
</template>
<script setup lang="ts">
import UserSearch from './c-cpns/user-search.vue'
import UserContent from './c-cpns/user-content.vue'
import UserModal from './c-cpns/user-modal.vue'
import { ref } from 'vue'
const contentRef = ref<InstanceType<typeof UserContent>>()
function handleQueryClick(formData: any) {
  // console.log(formData)
  contentRef.value?.fetchUserListData(formData)
}
function handleResetClick() {
  // console.log('rest-click')

  contentRef.value?.fetchUserListData()
}
const userModalRef = ref<InstanceType<typeof UserModal>>()
// 新建用户 userModalRef 弹出对话框
function handleNewUserClick() {
  // console.log('user。vue新建用户')
  // userModalRef.value!.dialogVisible = true
  userModalRef.value?.setDialogVisible(true)
}
// 编辑用户
function handleEditeClick(itemData: any) {
  console.log('编辑用户', itemData)
  // 显示弹窗
  userModalRef.value?.setDialogVisible(false, itemData)
}
</script>
<style lang="less" scoped>
.user {
  // 整个页面圆角 超出部分隐藏
  border-radius: 8px;
  overflow: hidden;
}
</style>
